<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<!-- 网页头部 Begin -->
<div class="header"></div>
<!-- 网页头部 End -->
<div class="am-cf shop-main">
  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
	  <form id="orderInfoForm" class="validator-form" callback="orderInfoFormAjaxSubmit()" action="http://localhost:8080/order/add" method="post">
      <input type="hidden" id="token" name="token" value="" />
      <div class="am-panel-group am-margin am-text-xs" id="myCollapse">
        <!-- '选择收货地址'面板 Begin -->
        <div class="am-panel am-panel-default">
          <div class="am-panel-hd">
            <h4 class="am-panel-title" data-am-collapse="{parent: '#myCollapse', target: '#myCollapse-1'}">
              收货信息
            </h4>
          </div>
          <div id="myCollapse-1" class="am-panel-collapse am-collapse am-in">
            <div id="shippingList" class="am-panel-bd am-g">
            </div>
          </div>
        </div>
        <!-- '选择收货地址'面板 End -->
        <div class="am-panel am-panel-default">
          <div class="am-panel-hd">
            <h4 class="am-panel-title" data-am-collapse="{parent: '#myCollapse', target: '#myCollapse-2'}">
              配送方式
            </h4>
          </div>
          <div id="myCollapse-2" class="am-panel-collapse am-collapse am-in">
            <div class="am-panel-bd">
			  <label class="am-radio">
			    <input type="radio" name="deliveryTypeId" value="科泰宠物托运中心" checked="checked" data-am-ucheck />
                科泰宠物托运中心
			  </label>
            </div>
          </div>
        </div>
        <div class="am-panel am-panel-default paymentConfig">
          <div class="am-panel-hd">
            <h4 class="am-panel-title" data-am-collapse="{parent: '#myCollapse', target: '#myCollapse-3'}">
              支付方式
            </h4>
          </div>
          <div id="myCollapse-3" class="am-panel-collapse am-collapse am-in">
            <div class="am-panel-bd">
			  <label class="am-radio">
			    <input type="radio" name="paymentConfigId" value="支付宝" checked="checked" data-am-ucheck />
				支付宝
			  </label>
            </div>
          </div>
        </div>
        <div class="am-panel am-panel-default">
          <div class="am-panel-hd">
            <h4 class="am-panel-title" data-am-collapse="{parent: '#myCollapse', target: '#myCollapse-4'}">
              附言
            </h4>
          </div>
          <div id="myCollapse-4" class="am-panel-collapse am-collapse am-in">
            <div class="am-panel-bd am-form">
              <input type="text" class="am-input-sm" id="remark" name="remark" value="" placeholder="请输入附言..." />
            </div>
          </div>
        </div>
        <div class="am-panel am-panel-default">
          <div class="am-panel-hd">
            <h4 class="am-panel-title" data-am-collapse="{parent: '#myCollapse', target: '#myCollapse-5'}">
              商品信息
            </h4>
          </div>
          <div id="myCollapse-5" class="am-panel-collapse am-collapse am-in">
            <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
              <table id="tblCartList" class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
                <thead>
                  <tr>
                    <th>商品</th>
                    <th>分类</th>
                    <th>卖家</th>
                    <th>售价</th>
                    <th>数量</th>
                    <th>小计</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="am-cf am-margin">
          <a class="backCartItem  am-btn am-btn-default am-btn-xs am-fl" href="cart_item_list.html">
            <span class="am-icon-toggle-left am-icon-fw">&nbsp;</span>返回购物车</a>
          <button type="submit" class="formButton am-btn am-btn-success am-btn-xs am-fr">
            <span class="am-icon-money am-icon-fw">&nbsp;</span>去结算</button>
        </div>
      </div>
      </form>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    // 收货地址列表
    let shippingList = new Array();

    // 购物车列表
    let cartList = new Array();

    // 商品分类列表
    let categoryList = new Array();

    let jsonUser;
    let token;

    $().ready( function() {

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        // 设置token
        $('#token').val(token);

        // 加载公共顶部模板
        $('.header').load('header.html');

        // 面板折叠效果
        $('#myCollapse').collapse({
            toggle: false
        });

        // 加载'收货地址'列表数据
        loadShippingList();

        // 加载'商品分类'列表
        loadCategoryList();

        // 加载'购物车'列表数据
        loadCartList();

    });// $().ready();

/**	加载'收货地址'列表数据 **/
function loadShippingList() {

    // 加载'收货地址列表'数据
    $.post('http://localhost:8080/shipping/list', {token:token}, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        shippingList = result.data;

        // 填充表格数据
        fillShippingList();

    });// $.post();

}// loadShippingList();

/** 填充表格数据 **/
function fillShippingList( ) {

    // 清空表格数据
    $('#shippingList').empty();

    // 如果没有集合数据，就直接返回
    if( !shippingList || shippingList.length == 0 ){
        // 设置没有数据提示
        let noShipping = '<label class="am-radio">'
                          + '<input type="radio" checked="checked" data-am-ucheck />'
                          + '<a target="_blank" href="member_receiver_list.html">您还没有收货地址，点我添加收货地址'
                          + '</a></label>';

        $('#shippingList').append(noShipping);
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < shippingList.length; i++ ) {

        let shipping = shippingList[i];

        // id
        let rdoId = '<label class="am-radio"><input type="radio" name="shippingId" value="' + shipping.id + '" data-am-ucheck>'
                    + shipping.name + '</label>';

        // 如果是默认地址
        if( shipping.hasDefault ) {
            // 就设置默认选中
            rdoId = '<label class="am-radio"><input type="radio" name="shippingId" checked="checked" value="' + shipping.id + '" data-am-ucheck>'
                + shipping.name + '</label>';
        }

        // 邮编
        let lblZipCode = '<strong>邮编：</strong>' + shipping.zipCode + '&nbsp;&nbsp;&nbsp;&nbsp;';

        // 手机
        let lblPhone = '<strong>手机号码：</strong>' + shipping.phone + '&nbsp;&nbsp;&nbsp;&nbsp;';

        // 收货地址
        let lblAddress = '<br /><strong>收货地址：</strong>' + shipping.address;

        // 将构造好的单元格数据，填充到表格中
        $('#shippingList').append('<div class="am-u-md-12 am-u-lg-4">' + rdoId + lblZipCode + lblPhone + lblAddress + '</div>');

    }// for();

}// fillShippingList();

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

        }// success();

    });// $.post();

}// loadCategoryList();

/**	加载'购物车'列表数据 **/
function loadCartList() {

    // 加载'商品列表'数据
    $.post('http://localhost:8080/cart/list', {token:token}, function (result) {

        // 如果返回的是token失效，就重新登录
        if(result.code == 419) {
            // token不存在的话，就提示登录
            $("#member-login-modal").modal();
            return;
        }// if(result.code == 419);

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            Modal.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        cartList = result.data;

        // 填充表格数据
        fillCartList();

    });// $.post();

}// loadCartList();

/** 填充表格数据 **/
function fillCartList( ) {

    // 清空表格数据
    $('#tblCartList tbody').empty();

    // 隐藏显示提示
    $('#noData').hide();

    // 如果没有集合数据，就直接返回
    if( !cartList || cartList.length == 0 ){
        // 设置没有数据提示
        $('#noData').show();
        // 禁用'确认订单'按钮
        $('#orderInfoButton').attr("disabled", "disabled");
        return;
    }// if();

    // 商品总数量
    let quantityAmount = 0;
    // 商品总金额
    let priceAmount = 0;

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < cartList.length; i++ ) {

        let cart = cartList[i];

        // 商品名称
        let tdName = '<td class="productName"><a href="product_content.html?id=' + cart.productId + '&cid=' + cart.product.categoryId + '">';

        // 商品图片
        let tdImage = '<img width="90px" height="90px" style="border: 1px solid #ddd;" src="' + IMAGE_URL_CONST.PRODUCT + cart.product.mainImage + '" />&emsp;';

        // 封装商品名称
        tdName += tdImage + cart.product.name + '</a></td>';

        // 商品分类
        let tdCategory = '<td class="am-text-middle">' + getCategoryPath(cart.product.categoryId) + '</td>';

        // 卖家
        let tdSellerName = '<td class="am-text-middle"><strong class="am-text-truncate">'
            + '<a target="_blank" href="seller_item_list.html?id=' + cart.product.userId
            + '">' + cart.product.userName + '</a></strong></td>';

        // 价格
        let tdPrice = '<td class="am-text-middle">' + priceCurrencyFormat(cart.product.price) + '</td>';

        // 数量
        let tdQuantity = '<td class="am-text-middle"><span class="storeInfo">' + cart.quantity + '</span></td>';
        // 如果数量为0，说明库存不足
        if( cart.quantity == 0 ) {
            tdQuantity = '<td class="am-text-middle"><span class="storeInfo am-text-danger">[库存不足]</span></td>';
        }

        // 小计
        let subTotalPrice = cart.product.price * cart.quantity;
        let tdSubTotal = '<td class="am-text-middle"><strong class="subtotalPrice am-text-danger">' + priceCurrencyFormat(subTotalPrice)  + '</strong></td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblCartList tbody').append('<tr>' + tdName + tdCategory + tdSellerName + tdPrice + tdQuantity + tdSubTotal + '</tr>');

        // 统计商品总件数
        quantityAmount += cart.quantity;
        // 统计商品总金额
        priceAmount += subTotalPrice;

    }// for();

    // 总计单元格
    let trTotalAmount = '<tr><td colspan="5">商品共计&nbsp;<strong class="am-text-danger">'
        + quantityAmount + '</strong>&nbsp;件&nbsp;&nbsp;&nbsp;&nbsp;'
        + '商品总金额：<strong class="am-text-danger">'
        + priceCurrencyFormat(priceAmount) + '</strong>&nbsp;&nbsp;&nbsp;&nbsp;<br class="am-show-sm-only">'
        + '配送费用：<strong class="am-text-danger">￥12</strong>&nbsp;&nbsp;&nbsp;&nbsp;'
        + '订单总金额：<strong id="orderAmount" class="am-text-danger">'
        + priceCurrencyFormat(priceAmount + 12) + '</strong></td></tr>';

    $('#tblCartList tbody').append(trTotalAmount);

    // 如果商品总金额为0元
    if( priceAmount == 0 ) {
        // 就禁止点击'确定订单'按钮
        $('.formButton').attr("disabled", "disabled");
    }

}// fillCartList();

/** 根据商品分类id，获取商品分类路径信息 **/
function getCategoryPath( categoryId ) {

    // 分类路径
    let categoryPath = "";

    // 父分类id
    let parentCategoryId;

    // 子分类名称
    let childCategoryName;

    // 循环查找父分类id
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的id，等于传入的分类id
        if( category.id == categoryId ){
            // 设置父分类id
            parentCategoryId = category.parentId;
            // 设置子分类名称
            childCategoryName = category.name;
            break;
        }

    }// for();

    // 循环查找父分类名称
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，等于找到的父分类id
        if( category.id == parentCategoryId ){
            // 设置当前父分类名称路径
            categoryPath = category.name + '&nbsp;->&nbsp;' + childCategoryName;
            break;
        }

    }// for();

    return categoryPath;

}// getCategoryPath( categoryId );

/** 表单' Ajax提交 **/
function orderInfoFormAjaxSubmit(){

    // '修改密码表单'提交
    $("#orderInfoForm").ajaxSubmit({
        success:function(result){

            // 如果返回的是token失效，就重新登录
            if(result.code == 419) {
                // token不存在的话，就提示登录
                $("#member-login-modal").modal();
                return;
            }// if(result.code == 419);

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                // 重新加载购物清单列表
                loadCartList();
                return;
            }

            // 如果返回的数据响应码为200
            // 就跳转到订单订单结算页面
            let orderId = result.data;
            top.location.href = 'order_result.html?id=' + orderId;

        }// success(result);
    });

}// orderInfoFormAjaxSubmit();
</script>
</html>